<!--刘川中-->
<!--2017/12/22-->
<template>
  <section>
    <!--搜索start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters"  @submit.native.prevent :ref="'filterForm'">
          <el-form-item label="搜索退货单">
              <el-input v-model.trim="filters.name" @keyup.native.enter="handleList" placeholder="请输入订单号、用户ID、或商品名称进行搜索" style="width: 320px"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="filters.order_type" placeholder="订单类型" style="width: 140px" @change="handleList">
              <el-option label="订单类型(全部)" value=""></el-option>
              <el-option
                v-for="(item, index) in orderType"
                :key="item.value"
                :label="item"
                :value="index + 1">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="filters.refund_type" placeholder="退款类型" style="width: 140px" @change="handleList">
              <el-option label="退款类型(全部)" value=""></el-option>
              <el-option
                v-for="(item, index) in getRefundTypes"
                :key="item.value"
                :label="item"
                :value="index + 1">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交日期">
            <el-date-picker
              :ref="'datePicker'"
              v-model="timeValues"
              type="daterange"
              value-format="yyyy-MM-dd"
              @change="timeChange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="handleList" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        <el-form-item style="float: right">
          <el-button type="success" @click="handleRestFilters" icon="el-icon-refresh">重置</el-button>
        </el-form-item>

      </el-form>
    </el-col>
    <!--搜索end  -->

    <!--表格start -->
    <el-table :data="refundList" :highlight-current-row="true" v-loading="visible.listLoading" style="width: 100%;">
      <el-table-column prop="order_refund_id" label="退款单号" sortable width=""></el-table-column>
      <el-table-column prop="order_id" label="订单号" sortable width=""></el-table-column>
      <el-table-column prop="created_at" label="提交时间" sortable width=""></el-table-column>
      <el-table-column prop="updated_at" label="处理时间" sortable></el-table-column>
      <el-table-column prop="user_id" label="用户ID" sortable></el-table-column>
      <el-table-column prop="refund_total" label="退款金额" sortable></el-table-column>
      <el-table-column prop="refund_type" label="退款类型" sortable>
        <template slot-scope="scope">
          {{ getRefundTypes[parseInt(scope.row.refund_type) - 1] }}
        </template>
      </el-table-column>
      <el-table-column label="申请状态" sortable sort-by="refund_status">
        <template slot-scope="scope">
          {{ getReturnServiceStatusType[scope.row.refund_status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <a href="javascript:" class="color-blue pointer" @click="toDetail(scope.$index, scope.row)">详情</a>
        </template>
      </el-table-column>
    </el-table>
    <!--表格end -->
    <!--分页start -->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                     :total="pagination.total"
                     @current-change="handlePageChange" @size-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <!--分页start -->
  </section>
</template>
<script>
  import utils from '../../common/js/util'
  import { getRefundList } from '../../api/api'
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        refundList: [],
        filters: {
          pageSize: 10,
          page: 1,
          name: '',
          order_type: '',
          refund_type: '',
          created_at: '',
          updated_at: ''
        },
        timeValues: [],
        page: 1,
        pagination: {
          total: 0
        },
        visible: {
          listLoading: false
        }
      };
    },
    computed: {
      ...mapGetters([
        'orderType',
        'getRefundTypes',
        'getReturnServiceStatusType'
      ])
    },
    methods: {
      // 获取列表
      handleList () {
        if (this.visible.listLoading) return
        this.visible.listLoading = true
        getRefundList(this.filters).then(res => {
          if (parseInt(res.status) === 1) {
            this.refundList = res.data
            this.visible.listLoading = false
            this.pagination.total = res.totalCount
          }
        });
      },
      // 重置搜索列表
      handleRestFilters () {
        this.filters = {
          pageSize: 10,
          page: 1,
          name: '',
          order_type: '',
          refund_type: '',
          created_at: '',
          updated_at: ''
        }
        this.timeValues = []
        this.handleList();
      },
      // 页码改变
      handlePageChange (page) {
        this.filters.page = page;
        this.handleList();
      },
      // 分页条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size;
        this.handleList();
      },
      // 选中时间
      timeChange () {
        if (utils.isArray(this.timeValues) && this.timeValues.length > 1) {
          this.filters.created_at = this.timeValues[0]
          this.filters.updated_at = this.timeValues[1]
          this.handleList()
        }
      },
      // 跳转到详情页面
      toDetail (index, row) {
        this.$router.push({path: '/order/refund/' + row.order_refund_id})
      }
    },
    mounted () {
      this.handleList()
    }
  };
</script>
<style rel="stylesheet/sass" lang="sass" scoped>
</style>
